import { useGetThemesByDisciplineId } from "@/entities/theme/model/useGetThemesByDisciplineId";
import Theme from "@/entities/theme/ui/Theme";
import { Canvas3d } from "@/shared/3d/Canvas3d";
import { Environment, Gltf } from "@react-three/drei";
import NavigationBlock from "./NavigationBlock";
import { useState } from "react";
import ChooseThemeCamera from "./ChooseThemeCamera";

type ChooseThemeProps = {
    disciplineId: number
}

export default function ChooseTheme(props: ChooseThemeProps) {

    const { themes, isSuccess, refetch, errorMessage } = useGetThemesByDisciplineId(props.disciplineId)
    const [level, setLevel] = useState(1)
    const levels: number[] = []
    for (let i = 1; i <= 40; i++)levels.push(i)
    return (
        <>
            {isSuccess && !!themes?.length &&
                <>
                    <NavigationBlock
                        text={`Уровень ${level}`}
                        onRightClick={
                            () => {
                                if (level < 40)
                                    setLevel(level + 1)
                            }
                        }
                        onLeftClick={
                            () => {
                                if (level > 1)
                                    setLevel(level - 1)
                            }
                        }
                    />
                    <Canvas3d className='w-screen h-screen' camera={{ position: [10, 0, 0] }} >

                        <Environment files={'/assets/hdri.exr'} background />
                        <ambientLight />
                        <ChooseThemeCamera
                            target={[-16, 0, 210 - (level - 1) * 10]}
                        />

                        {levels.map((level) => {
                            return themes.filter((theme) => theme.level == level).map((theme, index) => {
                                return (
                                    <>
                                        <Theme
                                            themeId={theme.id}
                                            tittle={theme.tittle}
                                            position={[
                                                -22 + Math.floor(index / 3) * 4,
                                                0,
                                                213 - (level - 1) * 10 - (index % 3) * 3
                                            ]}
                                        />
                                    </>
                                )
                            })

                        })}
                        <Gltf castShadow receiveShadow src='/assets/factory_inside.glb' />
                    </Canvas3d>
                </>
            }
            {isSuccess && !themes?.length &&
                <>
                    Тем в данной дисциплине нет!
                </>
            }
            {errorMessage}
        </>
    )
}